﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>BizTalk Flows</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <!--link rel="stylesheet/less" href="less/bootstrap.less" type="text/css" /-->
    <!--link rel="stylesheet/less" href="less/responsive.less" type="text/css" /-->
    <!--script src="js/less-1.3.3.min.js"></script-->
    <!--append ‘#!watch’ to the browser URL, then refresh the page. -->

    <script src="Scripts/jquery-2.1.3.min.js" type="text/javascript"></script>
    <script src="Scripts/moment-with-locales.min.js" type="text/javascript"></script>
    <script src="Scripts/bootstrap.min.js" type="text/javascript"></script>
    <script src="Scripts/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
    <script src="Scripts/d3/d3.v3.min.js" type="text/javascript"></script>
    <script src="Scripts/dagre-d3.min.js" type="text/javascript"></script>

    <link href="Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="Content/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />
    <link href="Content/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css" />
    <style>
        .node rect {
            stroke: #5f9aa3;
            fill: #fff;
        }

        .edgePath path {
            stroke: #333;
            fill: none;
            stroke-width: 2px;
        }
    </style>
    <script>
        var baseUrl = "ArtefactsLinksService.svc";

        function GetFlows(queryType, format, sender) {
            var currentPanel = $('#tabs-736955');
            var url = baseUrl;

            $(sender).button('loading')

            switch (queryType) {
                case "ByInstanceID":
                    var instanceID = $('#inputInstanceID').val();
                    url += "/Get" + queryType + "/" + instanceID + "/format=" + format;
                    break;
                case "ByDates":
                    var startDate = $('#dtStartDate').data("DateTimePicker").date().utc();
                    var endDate = $('#dtEndDate').data("DateTimePicker").date().utc();
                    url += "/GetFrom/" + startDate.format("YYYYMMDDHHmmss") + "/To/" + endDate.format("YYYYMMDDHHmmss") + "/format=" + format;
                    break;
                case "ByPeriod":
                    var NbPeriod = $('#inputCount').val();
                    var PeriodType = $('input[name=inputPeriodType]:checked').val();
                    switch (format) {
                        case "json":
                            url += "/GetLast/" + PeriodType + "/" + NbPeriod + "/false/format=" + format;
                            break;
                        case "dgml":
                            var addApplications = $('#inputAddApplications')[0].checked;
                            var addFlows = $('#inputAddFlows')[0].checked;
                            var addInstaces = $('#inputAddInstaces')[0].checked;
                            url += "/GetLast/" + PeriodType + "/" + NbPeriod + "/" + addApplications + "/" + addFlows + "/" + addInstaces + "/format=" + format;
                            break;
                        default: throw new Error('wrong format requested:' + format);
                    }
                    break;
                default: throw new Error('wrong format queryType:' + queryType);
            }

            switch (format) {
                case "json":
                    GetGraph(url);
                    break;
                case "dgml":
                    window.location.href = url;
                    break;
                default: throw new Error('wrong format requested:' + format);
            }
            $(sender).button('reset');
        }

        function GetGraph(uri) {
            myApp.showPleaseWait();

            // Create a new directed graph
            var g = new dagreD3.Digraph();

            // Send an AJAX request
            $.getJSON(uri)
             .fail(function (jqxhr, textStatus, error) {
                 var err = textStatus + ", " + error;
                 alert("Request Failed: " + err);
             })
            .done(function (data) {
                // On success, 'data' contains a list of products.
                $.each(data.Artefacts, function (key, artefact) {
                    switch (artefact.Type) {
                        case "SendPort":
                            g.addNode(artefact.Id, { label: artefact.Name, style: 'fill: #B2F0D1;' });
                            break;
                        case "SendPort2Way":
                            g.addNode(artefact.Id, { label: artefact.Name, style: 'fill: #19D175;' });
                            break;
                        case "ReceivePort":
                            g.addNode(artefact.Id, { label: artefact.Name, style: 'fill: #B2CCFF;' });
                            break;
                        case "Orchestration":
                            g.addNode(artefact.Id, { label: artefact.Name, style: 'fill: #E3FFF9;' });
                            break;
                        default:
                            g.addNode(artefact.Id, { label: artefact.Name });
                    }
                });

                // Set up the edges
                $.each(data.Links, function (key, link) {
                    g.addEdge(null, link.FromComponentId, link.ToComponentId, { label: "" + link.ArtefactCount });
                });
                // Create the renderer
                var renderer = new dagreD3.Renderer();

                // Set up an SVG group so that we can translate the final graph.
                $('svg').empty();

                var svg = d3.select('svg'),
                    svgGroup = svg.append('g');

                // Set initial zoom to 75%
                var initialScale = 0.75;
                var oldZoom = renderer.zoom();
                renderer.zoom(function (graph, svg) {
                    var zoom = oldZoom(graph, svg);

                    // We must set the zoom and then trigger the zoom event to synchronize
                    // D3 and the DOM.
                    zoom.scale(initialScale).event(svg);
                    return zoom;
                });

                var layoutInitial = dagreD3.layout()
                                    .nodeSep(50)
                                    .rankDir("LR");

                var layout = renderer.layout(layoutInitial).run(g, svgGroup);

                // Run the renderer. This is what draws the final graph.
                //var layout = renderer.run(g, svgGroup);

                // Center the graph
                var xCenterOffset = (svg.attr('width') - layout.graph().width * initialScale) / 2;
                svgGroup.attr('transform', 'translate(' + xCenterOffset + ', 20)');
                svg.attr('height', layout.graph().height * initialScale + 40);

            });
        }

        var myApp;
        myApp = myApp || (function () {
            var pleaseWaitDiv = $('<div class="modal hide" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false"><div class="modal-header"><h1>Processing...</h1></div><div class="modal-body"><div class="progress progress-striped active"><div class="bar" style="width: 100%;"></div></div></div></div>');
            return {
                showPleaseWait: function () {
                    pleaseWaitDiv.modal();
                },
                hidePleaseWait: function () {
                    pleaseWaitDiv.modal('hide');
                },

            };
        })();
    </script>
</head>
<body>
    <div class="container-fluid">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="panel-group" id="panel-126934">
                    <!--<div class="panel panel-default">
                        <div class="panel-heading">
                            <a class="panel-title" href="#panel-element-84030" data-toggle="collapse" data-parent="#panel-126934">BizTalk Flow</a>
                        </div>
                        <div class="panel-collapse in" id="panel-element-84030">
                            <div class="panel-body">
                                This tools allow you to retrieve a graphical view of BizTalk Flows. It can show you a single flow instance or it can also aggregate multiple flows to display a inventory of you flow. It's based on DTA with tracking enabled on Send ports, Receive ports and orchestrations.
                            </div>
                        </div>
                    </div>-->
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <a class="panel-title collapsed" href="#panel-element-307317" data-toggle="collapse" data-parent="#panel-126934">Search Criteria</a>
                        </div>
                        <div class="panel-collapse in" id="panel-element-307317">
                            <div class="panel-body">
                                <div class="tabbable" id="tabs-736955">
                                    <ul class="nav nav-tabs">
                                        <li class="active"><a href="#panel-1" data-toggle="tab">Recent Flows</a> </li>
                                        <li><a href="#panel-2" data-toggle="tab">By Dates</a> </li>
                                        <li><a href="#panel-3" data-toggle="tab">By Instance ID</a> </li>
                                    </ul>
                                    <div class="tab-content">
                                        <div class="tab-pane active" id="panel-1">
                                            <form class="form-horizontal" role="form">
                                                <div class="form-group">
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-2 control-label" for="inputCount">
                                                        Number of period
                                                    </label>
                                                    <div class="col-sm-1">
                                                        <input class="form-control" id="inputCount" type="number" value="1">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-2 control-label" for="inputPeriodType">
                                                        Period type
                                                    </label>
                                                    <div class="col-sm-10">
                                                        <label class="checkbox-inline">
                                                            <input type="radio" name="inputPeriodType" id="Radio1" value="Second">Second
                                                        </label>
                                                        <label class="checkbox-inline">
                                                            <input type="radio" name="inputPeriodType" id="Radio2" value="Minute">Minute
                                                        </label>
                                                        <label class="checkbox-inline">
                                                            <input type="radio" name="inputPeriodType" id="Radio3" value="Hour" checked>Hour
                                                        </label>
                                                        <label class="checkbox-inline">
                                                            <input type="radio" name="inputPeriodType" id="Radio4" value="Day">Day
                                                        </label>
                                                        <label class="checkbox-inline">
                                                            <input type="radio" name="inputPeriodType" id="Radio5" value="Month">Month
                                                        </label>
                                                    </div>
                                                </div>



                                                <div class="form-group">
                                                    <div class="col-sm-offset-2 col-sm-10">
                                                        <div class="btn-toolbar" role="toolbar">
                                                            <button class="btn btn-default" type="button" id="cmdGetFlowsByPeriod" data-loading-text="Loading..." onclick="GetFlows('ByPeriod', 'json', this);">
                                                                Get Graph
                                                            </button>
                                                            <button class="btn btn-default" type="button" id="cmdGetDGMLByPeriod" data-loading-text="Loading..." onclick="$(this).button('loading'); GetFlows('ByPeriod', 'dgml'); $(this).button('reset');">
                                                                Get DGML
                                                            </button>
                                                            <label class="checkbox-inline">
                                                                <input type="checkbox" id="inputAddApplications" value="">BizTalk Apps
                                                            </label><label class="checkbox-inline">
                                                                <input type="checkbox" id="inputAddFlows" value="">Flows
                                                            </label><label class="checkbox-inline">
                                                                <input type="checkbox" id="inputAddInstaces" value="">Instances
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                        <div class="tab-pane" id="panel-2">
                                            <div class="form-group">
                                            </div>
                                            <form class="form-horizontal" role="form">
                                                <div class="form-group">
                                                    <label class="col-sm-2 control-label" for="inputStartDate">
                                                        Start Date
                                                    </label>
                                                    <div class="col-sm-2">
                                                        <input class="form-control" id="dtStartDate" type="text">
                                                    </div>
                                                    <label class="col-sm-2 control-label" for="inputEndDate">
                                                        End Date
                                                    </label>
                                                    <div class="col-sm-2">
                                                        <input class="form-control" id="dtEndDate" type="text">
                                                    </div>
                                                    <script type="text/javascript">
                                                        $(function () {
                                                            $('#dtStartDate').datetimepicker({
                                                                format: 'YYYY-MM-DD HH:mm',
                                                                defaultDate: moment().add(-1, 'days').utc(),
                                                                maxDate: moment().utc()
                                                            });
                                                            $('#dtEndDate').datetimepicker({
                                                                format: 'YYYY-MM-DD HH:mm',
                                                                defaultDate: moment().utc(),
                                                                maxDate: moment().utc()
                                                            });
                                                            $("#dtStartDate").on("dp.change", function (e) {
                                                                $('#dtEndDate').data("DateTimePicker").minDate(e.date);
                                                            });
                                                            $("#dtEndDate").on("dp.change", function (e) {
                                                                $('#dtStartDate').data("DateTimePicker").maxDate(e.date);
                                                            });
                                                        });
                                                    </script>
                                                </div>
                                                <div class="form-group">
                                                    <div class="col-sm-offset-2 col-sm-10">
                                                        <div class="btn-toolbar" role="toolbar">
                                                            <button class="btn btn-default" id="cmdGetFlowsByDates" type="button" data-loading-text="Loading..." onclick="$(this).button('loading'); GetFlows('ByDates', 'json'); $(this).button('reset');">
                                                                Get Graph
                                                            </button>

                                                            <button class="btn btn-default" id="cmdGetDGMLByDates" type="button" data-loading-text="Loading..." onclick="$(this).button('loading'); GetFlows('ByDates', 'dgml'); $(this).button('reset');">
                                                                Get DGML
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                        <div class="tab-pane" id="panel-3">
                                            <div class="form-group">
                                            </div>
                                            <form class="form-horizontal" role="form">
                                                <div class="form-group">
                                                    <label class="col-sm-2 control-label" for="inputInstanceID">
                                                        Instance ID
                                                    </label>
                                                    <div class="col-sm-4">
                                                        <input class="form-control" id="inputInstanceID" type="text" value="856d0c7e-6eab-4ce5-b590-0b9631d83506">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="col-sm-offset-2 col-sm-10">
                                                        <div class="btn-toolbar" role="toolbar">
                                                            <button class="btn btn-default" id="cmdGetFlowsByInstanceID" type="button" data-loading-text="Loading..." onclick="$(this).button('loading'); GetFlows('ByInstanceID', 'json'); $(this).button('reset');">
                                                                Get Graph
                                                            </button>
                                                            <button class="btn btn-default" id="cmdGetDGMLByInstanceID" type="button" data-loading-text="Loading..." onclick="$(this).button('loading'); GetFlows('ByInstanceID', 'dgml'); $(this).button('reset');">
                                                                Get DGML
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                <!--</div>
                <div class="panel-group" id="panel-126935">-->
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <a class="panel-title" href="#panel-element-840301"  data-parent="#panel-126935">Graph</a>
                        </div>
                        <div class="panel" id="panel-element-840301">
                            <div class="panel-body"><svg width="100%" eight="1" style="border: 1px solid"></svg></div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>




</body>

</html>
